<template>
  <div class="about">
    <!-- <router-link to="login" class="link">123 </router-link> -->
    <div class="input">
        <img src="../assets/shoujihao.png" >
        <input type="text" v-model="sjh" placeholder="请输入手机号" maxlength="11">
      </div>
      <div class="input" style="border-bottom:none">
        <input type="text" v-model="yanzheng" placeholder="请输入验证码" class="yzm" maxlength="6"> <button class="hq" @click="code()">获取验证码</button>
      </div>
      <div class="input">
        <img src="../assets/mima.png" >
        <input type="password" v-model="newpas" placeholder="请输入密码" maxlength="16">
      </div>
      <div class="input">
        <img src="../assets/mima.png" >
        <input type="password" v-model="newpass" placeholder="请确认密码" maxlength="16">
      </div>
    <div class="footer">
      <button @click="submint">提交</button>
    </div>

    <section class="wmassageMask" v-show="writeMessageShow">
      <div class="tk">
        <p>修改成功</p>
        <p class="border"></p>
        <button @click="qd">确定</button>
      </div>
    </section>

    <section class="wmassageMask" v-show="writeMessageShow1">
      <div class="tk">
        <p>修改失败</p>
        <p class="border"></p>
        <button @click="qd1">确定</button>
      </div>
    </section>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      phone: "",
      newpas: "",
      newpass: "",
      yanzheng: "",
      writeMessageShow: false,
      writeMessageShow1: false,
    };
  },
  methods: {
    code() {
      let that = this;
      axios.post("/login/code", { phone: that.phone }).then((res) => {
        console.log(res);
      });
    },
    qd(){
      this.writeMessageShow = !this.writeMessageShow
      this.$router.push("/Index")
    },
    qd1(){
      this.writeMessageShow1 = !this.writeMessageShow1
    },
    submint() {
      let that = this;
      if (that.newpas !== that.newpass) {
        alert("两次密码不一致");
      } else if (
        this.phone === "" ||
        this.newpas === "" ||
        this.newpass === "" ||
        this.yanzheng === ""
      ) {
        alert("请输入完整信息");
      } else {
        axios
          .post("/login/forget", {
            phone: that.phone,
            code: that.yanzheng,
            password: that.newpas,
            confirm: that.newpass,
          })
          .then((res) => {
            if(res.data.msg=="修改成功"){that.writeMessageShow = true}
            console.log(res), alert("提交成功");
          })
          .catch(function (err) {
            console.log(err);
            if(err){that.writeMessageShow1 = true}
          });
      }
    },
  },
};
</script>
<style scoped>

.input{border-bottom: 1px solid #E8E8E8;padding-bottom: 0.3rem;margin-top: 1.5rem;font-size: 1rem;}
.input span{width: 2rem;display: inline;}
.input img{vertical-align: middle;margin: 0 0.5rem;width:1.5rem ;}
.yzm{text-indent: 2.5rem;border-bottom: 1px solid #E8E8E8;padding-bottom: 0.3rem;}
.hq{outline:none;margin-left: 2rem;font-size: 1rem;background-color: #D62C32;padding:0.2rem 0.6rem;border-radius: 0.5rem;color: #fff; box-sizing: inherit;border: 0;}
input{border:none;outline:none;}
input::-webkit-input-placeholder {/* placeholder字体大小 */font-size:1rem;}


.about {
  width: 80%;
  margin: 5rem auto;
}

.footer button {
  background-color: #d62c32;
  color: #fff;
  width: 100%;
  border: none;
  padding: 0.7rem 0;
  border-radius: 0.4rem;
}
.footer {
  margin-top: 18rem;
}
</style>
